<template>
	<!--  -->
	<view class="bg-box">
		<!-- <waves itemClass="custom" @onTap="onTap" wavesColor="#ff9900">
			<view>自定义内容</view>
			<view>自定义内容</view>
		</waves> -->
		<view class="swiper_view">
			<view style="height: 20rpx;">

			</view>
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item ">
						<image class="swiper-item-img" :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="" style="height: 40rpx;">
		</view>
		<view class="mains">
			<waves itemClass="itemBg" @onTap="goPage(item)" wavesColor="#FFFFFF" v-for="(item,index) in items" :key="index">
				<view class="content">
					<image class="contentImg" :src="item.src" mode=""></image>
				</view>
				<view class="contentText">
					<text>{{item.name}}</text>
					<!-- <uni-link v-if="item.type=='link'" fontSize="15" showUnderLine="false" color="#00FFFF" :href="item.page" :text="item.name"></uni-link>
					<text v-else>{{item.name}}</text> -->
				</view>

			</waves>

		</view>
		<!-- 对话框 -->
		<uni-popup ref="popupDialog" type="dialog" >
			<uni-popup-dialog :showCancel="false" :type="'success'" title="通知" content="现场会已圆满结束,如有问题请与组委会联系。" :before-close="true" @confirm="dialogConfirm"
			 @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	import uniLink from "@/components/uni-link/uni-link.vue";
	import waves from '@/components/xxley-waves/waves.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			waves,
			uniLink,
			uniPopupDialog,
		},
		data() {
			return {
				// swiperList: [
				// 	'http://oss.91xiaokong.com/fireControl/swiper/2/1.jpg',
				// 	'http://oss.91xiaokong.com/fireControl/swiper/2/2.jpg',
				// 	'http://oss.91xiaokong.com/fireControl/swiper/2/3.png',
				// 	'http://oss.91xiaokong.com/fireControl/swiper/2/4.jpg',
				// 	'http://oss.91xiaokong.com/fireControl/swiper/2/5.jpg',
				// 	'http://oss.91xiaokong.com/fireControl/swiper/2/6.png',
				// ],
				swiperList: [
					'http://oss.91xiaokong.com/fireControl/swiper/2/10.jpg?x-oss-process=image/resize,m_fill,w_700,h_398',
					'http://oss.91xiaokong.com/fireControl/swiper/2/11.jpg?x-oss-process=image/resize,m_fill,w_700,h_398',
					'http://oss.91xiaokong.com/fireControl/swiper/2/12.jpg?x-oss-process=image/resize,m_fill,w_700,h_398',
					'http://oss.91xiaokong.com/fireControl/swiper/2/13.jpg?x-oss-process=image/resize,m_fill,w_700,h_398',
					'http://oss.91xiaokong.com/fireControl/swiper/2/14.jpg?x-oss-process=image/resize,m_fill,w_700,h_398',
				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				items: [{
						name: '秩序册',
						src: 'http://oss.91xiaokong.com/fireControl/home/3.png',
						page: '/pages/navigation/zhixuce/zhixuce',
						end: true
					},
					{
						name: '图册制度',
						src: 'http://oss.91xiaokong.com/fireControl/home/4.png',
						page: '/pages/tuce/index',
					},
					{
						name: '经验交流',
						src: 'http://oss.91xiaokong.com/fireControl/home/5.png',
						page: '/pages/jingyanjiaoliu/jingyanjiaoliu2',
					},
					{
						name: '美丽邢台',
						src: 'http://oss.91xiaokong.com/fireControl/home/6.png',
						page: '/pages/video/video'
					},
					{
						name: '天气预报',
						src: 'http://oss.91xiaokong.com/fireControl/home/7.png',
						type: 'link',
						//type: 'tianqi',
						//page: 'https://tianqi.qq.com/',
						//page:'https://apip.weatherdt.com/v2/h5.html?bg=1&md=02345&lc=accu&key=jMUef9tIdp'
						page: 'https://widget-page.qweather.net/h5/index.html?bg=1&md=0123456&lc=accu&key=51b9ccaff69349cfaf167bd17065c18d'
						//page:'https://www.tq321.com/m/hebeixingtai/',
						//page: '/pages/navigation/weather'

					},
					{
						name: '全景展示',
						src: 'http://oss.91xiaokong.com/fireControl/home/8.png',
						page: '/pages/vr/vr',
					},
				],
				windowHeight: 0,

			}
		},
		onLoad() {
			this.getSystemInfo();
		},
		onShow() {
			uni.showLoading({})
			setTimeout(function() {
				uni.hideLoading()
			}, 500)

		},
		methods: {
			/**
			 * 对话框点击确认按钮
			 */
			dialogConfirm(done) {
				console.log('点击确认');
				done()
			},
			/**
			 * 对话框取消按钮
			 */
			dialogClose(done) {
				// 需要执行 done 才能关闭对话框
				done()
			},
			toggleMessage(type) {
				this.$refs.popupDialog.open()
			},

			onTap() {
				uni.showToast({
					title: '点击事件',
					icon: 'none'
				});
			},
			goPage(item) {
				console.log(item);
				if (item.end) {
					// uni.showModal({
					// 	content: '现场会已圆满结束,如有问题请与组委会联系。',
					// 	showCancel: false
					// })
					this.$refs.popupDialog.open()
					return;
				}
				if (item.type == 'link') {
					uni.showLoading({})
					setTimeout(function() {
						uni.hideLoading()
						// uni.navigateTo({
						// 	url: item.page
						// })
						window.open(item.page)
					}, 1500)
				} else if (item.type == 'tianqi') {
					uni.showLoading({})
					setTimeout(function() {
						uni.hideLoading()
						uni.navigateTo({
							url: item.page
						})
					}, 1500)
				} else {
					uni.navigateTo({
						url: item.page
					})
				}

			},
			getSystemInfo() {
				let that = this;
				uni.getSystemInfo({
					success: function(e) {
						console.log(e)
						that.windowHeight = e.windowHeight;
						that.windowWidth = e.windowWidth;
					}
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.detail.value
			},
			durationChange(e) {
				this.duration = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	.contentImg {
		width: 86rpx;
		height: 86rpx;
	}

	.contentText {
		font-size: 30rpx;
		font-weight: 400;
		color: #00FFFF;
		text-align: center;
	}

	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		width: 100%;
		height: 70%;
	}



	.itemBg {
		background-image: url('http://oss.91xiaokong.com/fireControl/home/2.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 280rpx;
		width: 286rpx;
		margin-top: 30rpx;
	}

	.mains {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.swiper {
		width: 95%;
		margin: 0 auto;
		height: 100%;
	}

	.swiper-item {
		display: flex;
		height: 100%;
	}


	.swiper_view {
		background-image: url('http://oss.91xiaokong.com/fireControl/home/1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 730rpx;
		height: 398rpx;
		margin: 0 auto;
		position: relative;
		top: 30rpx;
	}

	.swiper-item-img {
		width: 730rpx;
		height: 350rpx;
	}



	.bg-box {
		background-image: url('http://oss.91xiaokong.com/fireControl/home/9.png');
		background-size: 100% 110%;
		background-repeat: no-repeat;
		height: 100%;
		padding-bottom: 50rpx;
	}
</style>
